<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/view/common/common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>百颐通置换商城</title>
    <%@include file="/WEB-INF/view/common/tc_css.jsp" %>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://ht.hzc365.com/button.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<style>
    header p {
        text-align: center;
        font-size: 14px;
        color: #666666;
        margin: 0;
        font-weight: 200;
    }

    header h1 {
        text-align: center;
        font-size: 30px;
        font-weight: 200;
        margin: 30px 0 10px 0;
    }

    .demo_line_02 {
        margin: 8px 0 8px;
        height: 1px;
        border-top: 1px solid #ddd;
        text-align: center;
    }

    .demo_line_02 span {
        text-align: center;
        font-size: 14px;
        color: #666666;
        margin: 0;
        font-weight: 200;

        position: relative;
        top: -9px;
        background: #fff;
        padding: 0 20px;
    }

    .col{
        text-align: center;
    }

    #content {
        background-color: #f7f7f7;
        overflow: hidden;
    }

    ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tab {
        width: 100%;
        margin: 20px auto;
        display: flex;
        overflow: hidden;
        text-align: center;
        color: #D6D6D6;
        background-color: #fff;
        height: 50px;
        line-height: 50px;
    }

    .active {
        color: #0247D3 !important;
    }

    .tab div {
        float: left;
        color: #757575;
        text-align: center;
        background-color: #fff;
        color: #757575;
        flex: 1;
        cursor: pointer;
    }

    .col-font {
        color: #757575;
    }

    .resource-img {
        max-width: 100%;
        display: block;
    }

    .center {
        margin: 0 auto;
    }

    #main {
        color: #757575;
        background-color: #fff;
    }
    #main1 {
        color: #757575;
        background-color: #fff;
    }

    #main li h2 {
        color: #005aaa;
        text-align: center;
        margin-top: 60px;
    }

    #main li p {
        text-indent: 2em;
        line-height: 24px;
    }

    #main li ul li {
        padding: 0 10px;
    }
    #main1 li h2 {
        color: #005aaa;
        text-align: center;
        margin-top: 60px;
    }

    #main1 li p {
        text-indent: 2em;
        line-height: 24px;
    }

    #main1 li ul li {
        padding: 0 10px;
    }

    .rule {
        margin: 0 auto;
    }

    .rule tr .title {
        background-color: #f1f1f1;
        width: 30%;
    }

    .rule td {
        background-color: #f7f7f7;
        width: 60%;
    }

    .rule tr,
    .rule td {
        text-align: center;
        height: 40px;
        vertical-align: middle;
    }

    #guige,
    #anli {
        background: #fff;
        overflow: hidden;
        padding: 10px;
    }

    #anli li h2 {
        color: #005aaa;
        text-align: center;
        margin-top: 20px;
    }

    .info dl {
        background-color: #f4f4f4;
        border-top: 1px solid #dbdbdb;
        clear: both;
        margin: 0;
        padding: 0 10px;
        overflow: hidden;
    }

    .info dt {
        float: left;
        text-align: left;
        width: 33%;
        line-height: 33px;
    }

    .info dd {
        float: right;
        text-align: right;
        width: 50%;
        line-height: 33px;
    }
    .searchBox > label {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<body style="background-color:#fbfbfb;">
<div class="container">
    <header>
        <%--<h1>优惠商城</h1>--%>
        <%--<p>咖盟微商 做有态度的玻尿酸</p>--%>
        <br>
        <form action="<c:url value="/dmz/subGoods/sub_show.html"/> " method="get" id="searchform" name="searchform">
            <div class="input-group">
                <input type="text" class="form-control" value="${parameter.entity.name}" name="entity.name" placeholder="输入你要查找的产品...">
                <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">搜索</button>
      </span>
            </div>
        </form>
        <%--<p>&gt;&gt;产品分类点击这里&lt;&lt;</p>--%>
    </header>

    <div class="row category">
        <a href="<c:url value="/pm/order/myOrder.html"/> " class="col-xs-3">
            <img class="img-responsive" src="<c:url value='/resources/tcimg/icon_rm.png'/>">
            <h4>我的订单</h4>
        </a>
        <%--<a href="/m_search/list?param.commend='Y'" class="col-xs-3">--%>
        <a href="<c:url value='/dmz/pmall/show.html'/> " class="col-xs-3">
            <img class="img-responsive" src="<c:url value='/resources/tcimg/icon_tm.png'/>">
            <h4>优惠商城</h4>
        </a>
        <a href="#" id="tq" class="col-xs-3">
            <img class="img-responsive" src="<c:url value='/resources/tcimg/theme.png'/>">
            <h4>特权商城</h4>
        </a>
        <%--<a href="<c:url value='/dmz/pmall/view.html?entity.goodsType.id=17'/> " class="col-xs-3">--%>
        <a href="<c:url value='/dmz/subGoods/sub_show.html'/> " class="col-xs-3">
            <img class="img-responsive" src="<c:url value='/resources/tcimg/icon_pp.png'/> ">
            <h4>置换商城</h4>
        </a>
    </div>

    <%--<div class="demo_line_02"><span>产品分类区</span></div>--%>
    <div class="row">
        <div class="col-xs-12">
            <div id="tagsList">
                <c:forEach items="${pTypes}" var="type" varStatus="sta">
                <c:if test="${sta.index%3==0}">
                <c:if test="${sta.index!=0}">
            </div>
            </c:if>
            <div class="row">
                </c:if>
                <div  class="col-xs-4 col" >
                    <button  data-id="${type.id}" type="button" style="margin:5px 0;width: 100px;line-height: 30px"
                             class="button blue">${type.name}</button>
                </div>
                <c:if test="${sta.index+1==pTypes.size()}">
            </div>
            </c:if>
                <%--<span class="label label-default">Default</span>--%>
                <%--<span class="label label-primary">Primary</span>--%>
                <%--<span class="label label-success">Success</span>--%>
                <%--<span class="label label-info">Info</span>--%>
                <%--<span class="label label-warning">Warning</span>--%>
                <%--<span class="label label-danger">Danger</span>--%>

            </c:forEach>
        </div>
    </div>
</div>
<div class="demo_line_02"><span style="color: #18a016">今日主推区</span></div>
<div class="row products">

        <div class="col-xs-12 col-md-6 col">
            <%--<a href="<c:url value='/dmz/subGoods/sub_detail.html?id='/>${zt.id}">--%>
                <%--<img class="img-responsive" src="${dmzImgPath}${zt.wallImgUrl}" alt="${zt.name}">--%>
            <%--</a>--%>

                <ul id="main1">
                    <li>
                        <ul class="col-font">
                            <li>
                                <table>
                                    <c:forEach items="${ztGoods}" var="zt" varStatus="status">
                                        <c:if test="${status.index % 2 == 0}">
                                        <tr>
                                            <td>
                                                <h2 style="margin-top: 10px;"><a href="<c:url value='/dmz/subGoods/sub_detail.html?id='/>${zt.id}"><span style="font-size: 14px;">${zt.name}&nbsp;&nbsp;&nbsp;</span></a>
                                                    <span style="font-size: 18px;color: #d20000">&nbsp;￥${zt.retailPrice}</span></h2>
                                                <a href="<c:url value='/dmz/subGoods/sub_detail.html?id='/>${zt.id}">
                                                <img src="${dmzImgPath}${zt.wallImgUrl}" class="resource-img center" />
                                                </a>
                                                <p style="font-size: 6px;height: 25px;">${zt.goodsInfo}</p>
                                            </td>
                                        </c:if>
                                        <c:if test="${status.index % 2 == 1}">
                                            <td>
                                                <h2 style="margin-top: 10px;"><a href="<c:url value='/dmz/subGoods/sub_detail.html?id='/>${zt.id}"><span style="font-size: 14px;">${zt.name}&nbsp;&nbsp;&nbsp;</span></a>
                                                    <span style="font-size: 18px;color: #d20000">&nbsp;￥${zt.retailPrice}</span></h2>
                                                <a href="<c:url value='/dmz/subGoods/sub_detail.html?id='/>${zt.id}">
                                                <img src="${dmzImgPath}${zt.wallImgUrl}" class="resource-img center" />
                                                </a>
                                                <p style="font-size: 6px;height: 25px;">${zt.goodsInfo}</p>
                                            </td>
                                            </tr>
                                            </c:if>
                                        <%--</c:if>--%>
                                        <%--<c:if test="${status.index+1 == ztGoods.size()}">--%>
                                        <%--</tr>--%>
                                    <%--</c:if>--%>
                                    </c:forEach>
                                </table>
                            </li>
                        </ul>
                    </li>
                </ul>
        </div>

    <div class="col-xs-12" style="padding-top: 20px;">
        <div class="demo_line_02"><span style="color: #18a016">产品分类区</span></div>

    </div>

</div>
<div id="ajax_loading" style="width:300px;margin: 10px  auto 15px;text-align:center;padding-top: 5px;">
    <img src="http://www.zmz365.com:8081/loading.gif">
</div>
<jsp:include page="/WEB-INF/view/common/footer.jsp"/>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<%--<script type="text/javascript" src="http://www.zmz365.com:8081/data/tags.js"></script>--%>
<script type="text/javascript">

    $(function () {
        $.ajaxSettings.async = false;
        $(".col>button").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            var url = "<c:url value='/dmz/subGoods/sub_show.html?pType='/>" + $(this).attr("data-id");
            window.location.href = url;
        });

        $(".rk").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            window.location.href = $(this).attr("data-url");
        });

        $("#tq").click(function (e) {
            e.preventDefault();
            <c:if test="${user.agentCode==null}">
            alert("请先去用户中心完善信息！");
            location.href="<c:url value="/mobile/my.html"/>";
            </c:if>
            <c:if test="${user.agentCode!=null}">
            location.href="<c:url value="/dmz/mobile/index.html"/>";
            </c:if>

        })

        var imgShare = "";

        //如果绑定了上级，就会弹出来绑定了上级
        var parent = "${parentName}";
        if (parent != "" && typeof(parent) != "undefined" && parent != null) {
            alert("您关注的小店主人是" + parent);
        }
        var jsapiParamJson =${jsapiParamJson};

        var urlShare = "";
        var shareName = "";
        var realName = "${user.realName}的小店";
        var shareDetail = "";
        <%--url=location.href.split('#')[0]+"&&myCode=${myCode}";//分享链接地址--%>
        urlShare = location.href.split('#')[0];//通过id分享
        if(urlShare.indexOf("?")>-1){
            urlShare+="&&myCode=${user.id}";
        }else {
            urlShare+="?myCode=${user.id}";
        }
        shareName = "${goods.shareName}";
        shareDetail = "${goods.shareDetail}";
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: jsapiParamJson.appId, // 必填，公众号的唯一标识
            timestamp: jsapiParamJson.timestamp, // 必填，生成签名的时间戳
            nonceStr: jsapiParamJson.nonceStr, // 必填，生成签名的随机串
            signature: jsapiParamJson.signature,// 必填，签名，见附录1
            jsApiList: jsapiParamJson.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function () {
            //朋友圈分享
            wx.onMenuShareTimeline({
                title: realName + ":让更多的人用上优惠的好产品", // 分享标题
                link: urlShare, // 分享链接
                imgUrl: imgShare, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                    alert("小店分享成功了");
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            //用户分享
            wx.onMenuShareAppMessage({
                title: realName + ":让更多的人用上优惠的好产品", // 分享标题
                desc: shareDetail, // 分享描述
                link: urlShare, // 分享链接
                imgUrl: imgShare, // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    alert("小店分享成功");
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        });

        //    var url = "http://www.zmz365.com/dreamer/dmz/pmall/goods/query.json";
        var url = "<c:url value="/dmz/subGoods/sub_query.json"/>";

        var start = 0;
        var length = 8;

        function query() {
            var type = "${param.pType}";
            if(type==""){
                type="${pType}";
            }
            var param = {
                "start": start,
                "length": length,
                "useDatatables": true,
                "entity.goodsType.id": type,
                "entity.name": "${parameter.entity.name}",
                <%--// "entity.goodsType.id": "${parameter.entity.goodsType.id}"--%>
            };

            $.getJSON(url, param, function (goodses) {
                if (goodses.length == 0) {
                    $("#ajax_loading").html("----抱歉到底了,即将上传更多新品----").height("5px").css(" margin: 5px auto 5px;");
                } else {
                    var str = "<ul id=\"main1\" class=\"col-font\">\n" +
                        "                            <li>\n" +
                        "                                <table>";
                    var img;
                    goodses.forEach(function (goods, i) {
                        var url = "<c:url value='/dmz/subGoods/sub_detail.html?id='/>" + goods.id;
                        img= "${dmzImgPath}"+goods.wallImgUrl;
                        if(i % 2 == 0){
                            str += "<tr>\n" +
                                "                                            <td>\n" +
                                "                                                <h2 style=\"margin-top: 10px;\"><a href=\"<c:url value='/dmz/subGoods/sub_detail.html?id='/>"+goods.id+"\"><span style=\"font-size: 14px;\">" + goods.name + "&nbsp;&nbsp;&nbsp;</span></a>\n" +
                                "                                                    <span style=\"font-size: 18px;color: #d20000\">&nbsp;￥"+goods.retailPrice+"</span></h2>\n" +
                                "                                                <a href=\'"+url+"\'><img src=\""+img+"\" class=\"resource-img center\" /></a>\n" +
                                "                                                <p style=\"font-size: 6px;height: 25px;\">" + goods.goodsInfo + "</p>\n" +
                                "                                            </td>\n";
                        }else if(i % 2 == 1){
                            str += "<td>\n" +
                                "                                                <h2 style=\"margin-top: 10px;\"><a href=\"<c:url value='/dmz/subGoods/sub_detail.html?id='/>"+goods.id+"\"><span style=\"font-size: 14px;\">" + goods.name + "&nbsp;&nbsp;&nbsp;</span></a>\n" +
                                "                                                    <span style=\"font-size: 18px;color: #d20000\">&nbsp;￥"+goods.retailPrice+"</span></h2>\n" +
                                "                                                <a href=\'"+url+"\'><img src=\""+img+"\" class=\"resource-img center\" /></a>\n" +
                                "                                                <p style=\"font-size: 6px;height: 25px;\">" + goods.goodsInfo + "</p>\n" +
                                "                                            </td></tr>";
                        }
                        // else if((i+1)% 2 ==0 && i==(goodses.lenght-1)){
                        //     str += "</tr>";
                        // }
                    });
                    str+="</table>\n" +
                        "                    </li>\n" +
                        "                </ul>";
                    if (img.indexOf("null") > -1) {
                    } else {
                        imgShare = img;
                        //console.log(str);
                        $(".products").append(str);
                    }
                    // start += goodses.length;
                    start++;
                }
            });

        }

        function onScroll() {
            var winHeight = window.innerHeight ? window.innerHeight : $(window).height(),
                closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100);
            if (closeToBottom) {
                query();
            }
        }
        query();
        $(window).bind('scroll', onScroll);
    });
</script>
</body>
</html>